<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>资源上传系统</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 顶部标题区域 -->
    <header class="page-header">
        <h1>资源上传平台</h1>
        <p class="header-desc">分享学习资料，积累积分兑换福利</p>
    </header>

    <!-- 导航切换区 -->
    <nav class="tab-nav">
        <button class="tab-btn active" data-tab="guide">顶部引导</button>
        <button class="tab-btn" data-tab="upload">核心上传区</button>
        <button class="tab-btn" data-tab="points">积分规则</button>
        <button class="tab-btn" data-tab="submit">确认提交</button>
    </nav>

    <!-- 内容区域容器 -->
    <main class="content-container">
        <!-- 1. 顶部引导模块 -->
        <section id="guide" class="content-tab active">
            <h2>📝 上传指引</h2>
            <div class="guide-list">
                <div class="guide-item">
                    <span class="step">①</span>
                    <p>在本页面完成学习资源上传，支持多种格式文件</p>
                </div>
                <div class="guide-item">
                    <span class="step">②</span>
                    <p>标题信息为必填项，完善信息可获得更多积分，积分可兑换精美礼品或1688内购福利</p>
                </div>
                <div class="guide-item">
                    <span class="step">③</span>
                    <p>提交后资源将保存至资源管理系统，您可随时登录下载学习</p>
                </div>
            </div>
        </section>

        <!-- 2. 核心上传区模块 -->
        <section id="upload" class="content-tab">
            <h2>📂 核心上传区</h2>
            
            <!-- A. 文件上传区域 -->
            <div class="upload-section">
                <h3>A. 资源文件上传</h3>
                <div class="file-drop-area">
                    <p>拖拽文件到此处上传，或点击选择文件</p>
                    <input type="file" id="file-upload" multiple accept=".pdf,.doc,.docx,.ppt,.pptx,.zip,.rar">
                    <label for="file-upload" class="file-btn">选择文件</label>
                    <p class="file-tips">支持格式：pdf, doc, docx, ppt, pptx, zip, rar（大小限制：&lt;50MB）</p>
                </div>
            </div>

            <!-- B. 基本信息区域 -->
            <div class="upload-section">
                <h3>B. 资源基本信息</h3>
                <div class="form-group">
                    <label for="resource-name">资源名称：</label>
                    <input type="text" id="resource-name" placeholder="请输入资源名称（必填）" required>
                </div>
                <div class="form-group">
                    <label for="resource-desc">资源简介：</label>
                    <textarea id="resource-desc" rows="3" placeholder="请简要描述资源内容（必填）" required></textarea>
                </div>
                <div class="form-group">
                    <label for="resource-type">资源类型：</label>
                    <select id="resource-type" required>
                        <option value="">请选择资源类型</option>
                        <option value="note">课堂笔记</option>
                        <option value="ppt">课件PPT</option>
                        <option value="exercise">习题试卷</option>
                        <option value="other">其他资料</option>
                    </select>
                </div>
            </div>

            <!-- C. 分类信息区域 -->
            <div class="upload-section">
                <h3>C. 资源分类信息</h3>
                <div class="form-group">
                    <label for="major">所属专业：</label>
                    <input type="text" id="major" placeholder="例如：计算机科学与技术">
                </div>
                <div class="form-group">
                    <label for="course">关联课程：</label>
                    <input type="text" id="course" placeholder="例如：数据结构与算法">
                </div>
            </div>
        </section>

        <!-- 3. 积分规则模块 -->
        <section id="points" class="content-tab">
            <h2>🎁 积分规则说明</h2>
            <div class="points-table">
                <div class="points-item">
                    <span class="points-type">基础上传</span>
                    <span class="points-value">+20积分</span>
                    <span class="points-desc">完成资源上传并通过审核</span>
                </div>
                <div class="points-item">
                    <span class="points-type">完善信息</span>
                    <span class="points-value">+10积分</span>
                    <span class="points-desc">填写完整资源简介和分类信息</span>
                </div>
                <div class="points-item">
                    <span class="points-type">优质资源</span>
                    <span class="points-value">+50-200积分</span>
                    <span class="points-desc">根据下载量和评分额外奖励</span>
                </div>
                <div class="points-item">
                    <span class="points-type">兑换说明</span>
                    <span class="points-value">--</span>
                    <span class="points-desc">100积分起兑，支持实物礼品和1688内购优惠</span>
                </div>
            </div>
        </section>

        <!-- 4. 确认提交模块 -->
        <section id="submit" class="content-tab">
            <h2>✅ 确认与提交</h2>
            <div class="submit-section">
                <div class="agreement">
                    <input type="checkbox" id="agree-terms">
                    <label for="agree-terms">我已阅读并同意<a href="#" class="terms-link">《用户上传协议》</a>和<a href="#" class="terms-link">《隐私政策》</a></label>
                </div>
                <div class="submit-btn-group">
                    <button id="reset-btn" class="btn-secondary">重置</button>
                    <button id="submit-btn" class="btn-primary">提交资源</button>
                </div>
                <div id="submit-result" class="submit-result"></div>
            </div>
        </section>
    </main>

    <script src="script.js"></script>
</body>
</html>